<div class="p+ pt0">
    <lx-text-field lx-label="First name" lx-focus="true">
        <input type="text" ng-model="vm.textFields.states.firstName">
    </lx-text-field>

    <lx-text-field lx-label="Company" ng-disabled="true">
        <input type="text" ng-model="vm.textFields.states.company">
    </lx-text-field>

    <lx-text-field lx-label="Email" lx-error="!vm.emailValidation(vm.textFields.states.invalidEmail)">
        <input type="email" ng-model="vm.textFields.states.invalidEmail">
    </lx-text-field>

    <span class="text-field-error" ng-if="!vm.emailValidation(vm.textFields.states.invalidEmail)">Email invalid</span>

    <div flex-container="row" flex-gutter="24">
        <div flex-item>
            <lx-text-field lx-label="Email"
                           lx-valid="vm.emailValidation(vm.textFields.states.email) && vm.textFields.states.email === vm.textFields.states.repeatedEmail"
                           lx-error="!vm.emailValidation(vm.textFields.states.email) || vm.textFields.states.email !== vm.textFields.states.repeatedEmail">
                <input type="email" ng-model="vm.textFields.states.email">
            </lx-text-field>
        </div>

        <div flex-item>
            <lx-text-field lx-label="Repeat previous email"
                           lx-valid="vm.emailValidation(vm.textFields.states.email) && vm.textFields.states.email === vm.textFields.states.repeatedEmail"
                           lx-error="!vm.emailValidation(vm.textFields.states.email) || vm.textFields.states.email !== vm.textFields.states.repeatedEmail">
                <input type="email" ng-model="vm.textFields.states.repeatedEmail">
            </lx-text-field>
        </div>
    </div>
</div>